Google Font "Merriweather" не отображается в Chrome.? - PullRequest
Новая
       2

Google Font "Merriweather" не отображается в Chrome.?

0 голосов
/ 01 марта 2020

В верхней части моего кода у меня есть:

https://fonts.googleapis.com/css?family=Merriweather&display=swap" rel = "таблица стилей">

И в моем CSS У меня есть:

семейство шрифтов: 'Merriweather',;

Но оно не отображается. Я не уверен, в чем причина. Кажется, все так просто, но ничего не работает

Буду признателен за любую помощь.

Вот верх моего HTML: 

 <link rel = "stylesheet"
   type = "text/css"
   href = "stylesheet.css" />

<link href="https://fonts.googleapis.com/css?family=Merriweather&display=swap" rel="stylesheet">

<head>

<title>Jesse | Personal Chef </title>

  <meta charset="UTF-8">
  <meta name="description" content="Jesse Personal Chef">
  <meta name="keywords" content="Food, Chef, Wilmington, NC, North Carolina Food, In Home Chef, Personal Chef, Chef For Hire, Jesse,">
  <meta name="author" content="Cal & Jen T.">
  <meta name="viewport" content="width=device-width, initial-scale=1">


</head>

Это мой CSS, сохраненный в виде таблицы стилей. css: 

<style>

/* HEADERS ~~~~~~~~~~ */

    h1 {
        font-family: 'Merriweather', ;
        text-align: center;
        font-size: 2.7em;
        color: 000;
        font-weight: 500;
        letter-spacing: 2%;
        line-height: 40px;
        padding-bottom: -100px;
        margin: 2%;

    }

     .subtitle {
        font-family: 'Merriweather', ;
        text-align: center;
        font-size: 1.04em;
        color: 000;
        font-weight: regular;
        margin: 1;
        line-height: 1px;
        padding-bottom: 60px;

    }


</style>

Спасибо

Ответы [ 2 ]

0 голосов
/ 01 марта 2020

Требуется одно небольшое исправление:

Измените это: 

font-family: 'Merriweather', ;

На это: 

font-family: 'Merriweather', serif;

Часть serif является шрифтом переключения при сбое в если он не может найти Merriweather.

Проверьте это в следующем фрагменте: 

<html>

<head>
  <link href=" https://fonts.googleapis.com/css?family=Merriweather&display=swap" rel="stylesheet" />
  <style>
    div {
      font-family: Merriweather, serif;
    }
  </style>
</head>

<body>
  <div>Test</div>
</body>

</html>

Вы также можете просто применить стиль font-family к тегу <body>, и все дочерние элементы будут наследовать это семейство шрифтов.

0 голосов
/ 01 марта 2020
  1. Проверьте ссылку на шрифты:
    • , если вы используете @font-face правило, проверьте ссылку на папку со шрифтами и убедитесь, что файлы шрифтов присутствуют в этой папке, также проверьте имя шрифта в @font-face правила и в font-family они должны быть равны;
    • , если вы используете CDN - проверьте ссылку на CDN;
  2. Откройте Dev Tools в вашем браузере (Ctrl ( Команда) + Shift + I) и во вкладке Сеть проверьте, загружен ваш шрифт или нет: https://prnt.sc/r9x8ab;
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...